import React, { useState } from 'react';
import { Card, Row, Col, Table, Button, Input, Select, DatePicker, Space, Tag, Divider, message, Modal, Form, Switch, Tree, TreeSelect, Checkbox } from 'antd';
import { SearchOutlined, ReloadOutlined, PlusOutlined, EditOutlined, DeleteOutlined, UserOutlined, SettingOutlined, SafetyOutlined, BellOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

const { RangePicker } = DatePicker;
const { Option } = Select;

interface UserData {
  key: string;
  id: number;
  username: string;
  nickname: string;
  email: string;
  mobile: string;
  status: number;
  createTime: string;
  dept: string;
}

interface LogData {
  key: string;
  id: number;
  username: string;
  type: string;
  action: string;
  ip: string;
  createTime: string;
  result: string;
}

interface RoleData {
  key: string;
  id: number;
  roleName: string;
  roleKey: string;
  sort: number;
  status: number;
  createTime: string;
  remark: string;
  permissions: string[];
}

interface MenuData {
  key: string;
  id: number;
  menuName: string;
  parentId: number;
  orderNum: number;
  path: string;
  component: string;
  menuType: string;
  visible: number;
  status: number;
  perms: string;
  icon: string;
  createTime: string;
  children?: MenuData[];
}

const SystemSettings: React.FC = () => {
  const [activeTab, setActiveTab] = useState('users');
  const [loading, setLoading] = useState(false);
  const [searchParams, setSearchParams] = useState({
    username: '',
    status: undefined,
    mobile: '',
    createTime: null
  });

  // 角色管理相关状态
  const [roleModalVisible, setRoleModalVisible] = useState(false);
  const [roleForm] = Form.useForm();
  const [editingRole, setEditingRole] = useState<RoleData | null>(null);
  const [permissionModalVisible, setPermissionModalVisible] = useState(false);
  const [selectedRolePermissions, setSelectedRolePermissions] = useState<string[]>([]);

  // 菜单管理相关状态
  const [menuModalVisible, setMenuModalVisible] = useState(false);
  const [menuForm] = Form.useForm();
  const [editingMenu, setEditingMenu] = useState<MenuData | null>(null);

  // 模拟用户数据
  const userData: UserData[] = [
    {
      key: '1',
      id: 1,
      username: 'admin',
      nickname: '管理员',
      email: 'admin@example.com',
      mobile: '13800138000',
      status: 1,
      createTime: '2024-01-15 10:30:00',
      dept: '技术部'
    },
    {
      key: '2',
      id: 2,
      username: 'user1',
      nickname: '普通用户',
      email: 'user1@example.com',
      mobile: '13800138001',
      status: 1,
      createTime: '2024-01-16 14:20:00',
      dept: '运营部'
    },
    {
      key: '3',
      id: 3,
      username: 'test',
      nickname: '测试用户',
      email: 'test@example.com',
      mobile: '13800138002',
      status: 0,
      createTime: '2024-01-17 09:15:00',
      dept: '测试部'
    }
  ];

  // 模拟日志数据
  const logData: LogData[] = [
    {
      key: '1',
      id: 1,
      username: 'admin',
      type: '用户管理',
      action: '新增用户',
      ip: '192.168.1.100',
      createTime: '2024-01-18 10:30:00',
      result: '成功'
    },
    {
      key: '2',
      id: 2,
      username: 'admin',
      type: '系统设置',
      action: '修改配置',
      ip: '192.168.1.100',
      createTime: '2024-01-18 11:15:00',
      result: '成功'
    },
    {
      key: '3',
      id: 3,
      username: 'user1',
      type: '个人中心',
      action: '修改密码',
      ip: '192.168.1.101',
      createTime: '2024-01-18 14:20:00',
      result: '成功'
    }
  ];

  // 模拟角色数据
  const [roleData, setRoleData] = useState<RoleData[]>([
    {
      key: '1',
      id: 1,
      roleName: '超级管理员',
      roleKey: 'admin',
      sort: 1,
      status: 1,
      createTime: '2024-01-15 10:30:00',
      remark: '超级管理员',
      permissions: ['system:user:list', 'system:user:add', 'system:user:edit', 'system:user:delete', 'system:role:list', 'system:role:add', 'system:role:edit', 'system:role:delete', 'system:menu:list', 'system:menu:add', 'system:menu:edit', 'system:menu:delete']
    },
    {
      key: '2',
      id: 2,
      roleName: '普通角色',
      roleKey: 'common',
      sort: 2,
      status: 1,
      createTime: '2024-01-16 14:20:00',
      remark: '普通角色',
      permissions: ['system:user:list', 'system:role:list', 'system:menu:list']
    },
    {
      key: '3',
      id: 3,
      roleName: '测试角色',
      roleKey: 'test',
      sort: 3,
      status: 0,
      createTime: '2024-01-17 09:15:00',
      remark: '测试角色',
      permissions: ['system:user:list']
    }
  ]);

  // 模拟菜单数据
  const [menuData, setMenuData] = useState<MenuData[]>([
    {
      key: '1',
      id: 1,
      menuName: '系统管理',
      parentId: 0,
      orderNum: 1,
      path: '/system',
      component: '',
      menuType: 'M',
      visible: 1,
      status: 1,
      perms: '',
      icon: 'system',
      createTime: '2024-01-15 10:30:00',
      children: [
        {
          key: '2',
          id: 2,
          menuName: '用户管理',
          parentId: 1,
          orderNum: 1,
          path: '/system/user',
          component: 'system/user/index',
          menuType: 'C',
          visible: 1,
          status: 1,
          perms: 'system:user:list',
          icon: 'user',
          createTime: '2024-01-15 10:30:00'
        },
        {
          key: '3',
          id: 3,
          menuName: '角色管理',
          parentId: 1,
          orderNum: 2,
          path: '/system/role',
          component: 'system/role/index',
          menuType: 'C',
          visible: 1,
          status: 1,
          perms: 'system:role:list',
          icon: 'peoples',
          createTime: '2024-01-15 10:30:00'
        },
        {
          key: '4',
          id: 4,
          menuName: '菜单管理',
          parentId: 1,
          orderNum: 3,
          path: '/system/menu',
          component: 'system/menu/index',
          menuType: 'C',
          visible: 1,
          status: 1,
          perms: 'system:menu:list',
          icon: 'tree-table',
          createTime: '2024-01-15 10:30:00'
        }
      ]
    },
    {
      key: '5',
      id: 5,
      menuName: '首页',
      parentId: 0,
      orderNum: 0,
      path: '/dashboard',
      component: 'dashboard/index',
      menuType: 'C',
      visible: 1,
      status: 1,
      perms: '',
      icon: 'dashboard',
      createTime: '2024-01-15 10:30:00'
    }
  ]);

  // 权限选项
  const permissionOptions = [
    { label: '用户查询', value: 'system:user:list' },
    { label: '用户新增', value: 'system:user:add' },
    { label: '用户修改', value: 'system:user:edit' },
    { label: '用户删除', value: 'system:user:delete' },
    { label: '角色查询', value: 'system:role:list' },
    { label: '角色新增', value: 'system:role:add' },
    { label: '角色修改', value: 'system:role:edit' },
    { label: '角色删除', value: 'system:role:delete' },
    { label: '菜单查询', value: 'system:menu:list' },
    { label: '菜单新增', value: 'system:menu:add' },
    { label: '菜单修改', value: 'system:menu:edit' },
    { label: '菜单删除', value: 'system:menu:delete' }
  ];

  const userColumns: ColumnsType<UserData> = [
    {
      title: '用户编号',
      dataIndex: 'id',
      key: 'id',
      width: 100,
    },
    {
      title: '用户名称',
      dataIndex: 'username',
      key: 'username',
      width: 120,
    },
    {
      title: '用户昵称',
      dataIndex: 'nickname',
      key: 'nickname',
      width: 120,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      width: 180,
    },
    {
      title: '手机号码',
      dataIndex: 'mobile',
      key: 'mobile',
      width: 130,
    },
    {
      title: '部门',
      dataIndex: 'dept',
      key: 'dept',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (status: number) => (
        <Tag color={status === 1 ? 'green' : 'red'}>
          {status === 1 ? '正常' : '停用'}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 180,
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_, record) => (
        <Space size="small">
          <Button type="link" size="small" icon={<EditOutlined />}>
            修改
          </Button>
          <Button type="link" size="small" icon={<DeleteOutlined />} danger>
            删除
          </Button>
          <Button type="link" size="small">
            重置密码
          </Button>
        </Space>
      ),
    },
  ];

  const logColumns: ColumnsType<LogData> = [
    {
      title: '日志编号',
      dataIndex: 'id',
      key: 'id',
      width: 100,
    },
    {
      title: '操作人',
      dataIndex: 'username',
      key: 'username',
      width: 120,
    },
    {
      title: '操作模块',
      dataIndex: 'type',
      key: 'type',
      width: 120,
    },
    {
      title: '操作内容',
      dataIndex: 'action',
      key: 'action',
      width: 150,
    },
    {
      title: '操作IP',
      dataIndex: 'ip',
      key: 'ip',
      width: 130,
    },
    {
      title: '操作时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 180,
    },
    {
      title: '操作结果',
      dataIndex: 'result',
      key: 'result',
      width: 100,
      render: (result: string) => (
        <Tag color={result === '成功' ? 'green' : 'red'}>
          {result}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: () => (
        <Button type="link" size="small">
          详情
        </Button>
      ),
    },
  ];

  // 角色管理列定义
  const roleColumns: ColumnsType<RoleData> = [
    {
      title: '角色编号',
      dataIndex: 'id',
      key: 'id',
      width: 100,
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName',
      width: 150,
    },
    {
      title: '权限字符',
      dataIndex: 'roleKey',
      key: 'roleKey',
      width: 150,
    },
    {
      title: '显示顺序',
      dataIndex: 'sort',
      key: 'sort',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: number) => (
        <Tag color={status === 1 ? 'green' : 'red'}>
          {status === 1 ? '正常' : '停用'}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 180,
    },
    {
      title: '操作',
      key: 'action',
      width: 250,
      render: (_, record) => (
        <Space size="small">
          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => handleEditRole(record)}>
            修改
          </Button>
          <Button type="link" size="small" icon={<SafetyOutlined />} onClick={() => handleRolePermissions(record)}>
            分配权限
          </Button>
          <Button type="link" size="small" icon={<DeleteOutlined />} danger onClick={() => handleDeleteRole(record.id)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  // 菜单管理列定义
  const menuColumns: ColumnsType<MenuData> = [
    {
      title: '菜单名称',
      dataIndex: 'menuName',
      key: 'menuName',
      width: 200,
    },
    {
      title: '图标',
      dataIndex: 'icon',
      key: 'icon',
      width: 100,
      render: (icon: string) => icon ? <span>{icon}</span> : '-',
    },
    {
      title: '排序',
      dataIndex: 'orderNum',
      key: 'orderNum',
      width: 80,
    },
    {
      title: '权限标识',
      dataIndex: 'perms',
      key: 'perms',
      width: 150,
      render: (perms: string) => perms || '-',
    },
    {
      title: '组件路径',
      dataIndex: 'component',
      key: 'component',
      width: 200,
      render: (component: string) => component || '-',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: number) => (
        <Tag color={status === 1 ? 'green' : 'red'}>
          {status === 1 ? '正常' : '停用'}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 180,
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_, record) => (
        <Space size="small">
          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => handleEditMenu(record)}>
            修改
          </Button>
          <Button type="link" size="small" icon={<PlusOutlined />} onClick={() => handleAddSubMenu(record)}>
            新增
          </Button>
          <Button type="link" size="small" icon={<DeleteOutlined />} danger onClick={() => handleDeleteMenu(record.id)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  // 角色管理处理函数
  const handleAddRole = () => {
    setEditingRole(null);
    roleForm.resetFields();
    setRoleModalVisible(true);
  };

  const handleEditRole = (role: RoleData) => {
    setEditingRole(role);
    roleForm.setFieldsValue(role);
    setRoleModalVisible(true);
  };

  const handleDeleteRole = (roleId: number) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个角色吗？',
      onOk: () => {
        setRoleData(prev => prev.filter(item => item.id !== roleId));
        message.success('删除成功');
      }
    });
  };

  const handleRolePermissions = (role: RoleData) => {
    setEditingRole(role);
    setSelectedRolePermissions(role.permissions);
    setPermissionModalVisible(true);
  };

  const handleSaveRole = async () => {
    try {
      const values = await roleForm.validateFields();
      if (editingRole) {
        // 编辑角色
        setRoleData(prev => prev.map(item => 
          item.id === editingRole.id 
            ? { ...item, ...values, key: item.key }
            : item
        ));
        message.success('角色修改成功');
      } else {
        // 新增角色
        const newRole: RoleData = {
          ...values,
          id: Date.now(),
          key: Date.now().toString(),
          createTime: new Date().toLocaleString(),
          permissions: []
        };
        setRoleData(prev => [...prev, newRole]);
        message.success('角色新增成功');
      }
      setRoleModalVisible(false);
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  const handleSavePermissions = () => {
    if (editingRole) {
      setRoleData(prev => prev.map(item => 
        item.id === editingRole.id 
          ? { ...item, permissions: selectedRolePermissions }
          : item
      ));
      message.success('权限分配成功');
      setPermissionModalVisible(false);
    }
  };

  // 菜单管理处理函数
  const handleAddMenu = () => {
    setEditingMenu(null);
    menuForm.resetFields();
    setMenuModalVisible(true);
  };

  const handleEditMenu = (menu: MenuData) => {
    setEditingMenu(menu);
    menuForm.setFieldsValue(menu);
    setMenuModalVisible(true);
  };

  const handleAddSubMenu = (parentMenu: MenuData) => {
    setEditingMenu(null);
    menuForm.resetFields();
    menuForm.setFieldsValue({ parentId: parentMenu.id });
    setMenuModalVisible(true);
  };

  const handleDeleteMenu = (menuId: number) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个菜单吗？删除后子菜单也会被删除。',
      onOk: () => {
        const deleteMenuRecursive = (menus: MenuData[], id: number): MenuData[] => {
          return menus.filter(menu => {
            if (menu.id === id) return false;
            if (menu.children) {
              menu.children = deleteMenuRecursive(menu.children, id);
            }
            return true;
          });
        };
        setMenuData(prev => deleteMenuRecursive(prev, menuId));
        message.success('删除成功');
      }
    });
  };

  const handleSaveMenu = async () => {
    try {
      const values = await menuForm.validateFields();
      if (editingMenu) {
        // 编辑菜单
        const updateMenuRecursive = (menus: MenuData[]): MenuData[] => {
          return menus.map(menu => {
            if (menu.id === editingMenu.id) {
              return { ...menu, ...values };
            }
            if (menu.children) {
              return { ...menu, children: updateMenuRecursive(menu.children) };
            }
            return menu;
          });
        };
        setMenuData(prev => updateMenuRecursive(prev));
        message.success('菜单修改成功');
      } else {
        // 新增菜单
        const newMenu: MenuData = {
          ...values,
          id: Date.now(),
          key: Date.now().toString(),
          createTime: new Date().toLocaleString()
        };
        
        if (values.parentId && values.parentId !== 0) {
          // 添加为子菜单
          const addSubMenuRecursive = (menus: MenuData[]): MenuData[] => {
            return menus.map(menu => {
              if (menu.id === values.parentId) {
                return {
                  ...menu,
                  children: [...(menu.children || []), newMenu]
                };
              }
              if (menu.children) {
                return { ...menu, children: addSubMenuRecursive(menu.children) };
              }
              return menu;
            });
          };
          setMenuData(prev => addSubMenuRecursive(prev));
        } else {
          // 添加为顶级菜单
          setMenuData(prev => [...prev, newMenu]);
        }
        message.success('菜单新增成功');
      }
      setMenuModalVisible(false);
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  const handleSearch = () => {
    setLoading(true);
    // 模拟搜索
    setTimeout(() => {
      setLoading(false);
      message.success('搜索完成');
    }, 1000);
  };

  const handleReset = () => {
    setSearchParams({
      username: '',
      status: undefined,
      mobile: '',
      createTime: null
    });
    message.info('已重置搜索条件');
  };

  const renderUserManagement = () => (
    <Card>
      <div style={{ marginBottom: 16 }}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Input
              placeholder="请输入用户名称"
              value={searchParams.username}
              onChange={(e) => setSearchParams({ ...searchParams, username: e.target.value })}
              allowClear
            />
          </Col>
          <Col span={6}>
            <Input
              placeholder="请输入手机号码"
              value={searchParams.mobile}
              onChange={(e) => setSearchParams({ ...searchParams, mobile: e.target.value })}
              allowClear
            />
          </Col>
          <Col span={6}>
            <Select
              placeholder="用户状态"
              value={searchParams.status}
              onChange={(value) => setSearchParams({ ...searchParams, status: value })}
              allowClear
              style={{ width: '100%' }}
            >
              <Option value={1}>正常</Option>
              <Option value={0}>停用</Option>
            </Select>
          </Col>
          <Col span={6}>
            <RangePicker
              placeholder={['开始日期', '结束日期']}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>
        <Row style={{ marginTop: 16 }}>
          <Col>
            <Space>
              <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
                搜索
              </Button>
              <Button icon={<ReloadOutlined />} onClick={handleReset}>
                重置
              </Button>
              <Button type="primary" icon={<PlusOutlined />}>
                新增
              </Button>
              <Button type="default">
                导入
              </Button>
              <Button type="default">
                导出
              </Button>
            </Space>
          </Col>
        </Row>
      </div>
      <Table
        columns={userColumns}
        dataSource={userData}
        loading={loading}
        pagination={{
          total: userData.length,
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条记录`,
        }}
        scroll={{ x: 1200 }}
      />
    </Card>
  );

  const renderOperationLog = () => (
    <Card>
      <div style={{ marginBottom: 16 }}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Input placeholder="请输入操作人员" allowClear />
          </Col>
          <Col span={6}>
            <Input placeholder="请输入操作模块" allowClear />
          </Col>
          <Col span={6}>
            <Input placeholder="请输入操作名" allowClear />
          </Col>
          <Col span={6}>
            <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
          </Col>
        </Row>
        <Row style={{ marginTop: 16 }}>
          <Col>
            <Space>
              <Button type="primary" icon={<SearchOutlined />}>
                搜索
              </Button>
              <Button icon={<ReloadOutlined />}>
                重置
              </Button>
              <Button type="default">
                导出
              </Button>
            </Space>
          </Col>
        </Row>
      </div>
      <Table
        columns={logColumns}
        dataSource={logData}
        pagination={{
          total: logData.length,
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条记录`,
        }}
        scroll={{ x: 1000 }}
      />
    </Card>
  );

  const renderRoleManagement = () => (
    <Card>
      <div style={{ marginBottom: 16 }}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Input placeholder="请输入角色名称" allowClear />
          </Col>
          <Col span={6}>
            <Input placeholder="请输入权限字符" allowClear />
          </Col>
          <Col span={6}>
            <Select placeholder="角色状态" allowClear style={{ width: '100%' }}>
              <Option value={1}>正常</Option>
              <Option value={0}>停用</Option>
            </Select>
          </Col>
          <Col span={6}>
            <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
          </Col>
        </Row>
        <Row style={{ marginTop: 16 }}>
          <Col>
            <Space>
              <Button type="primary" icon={<SearchOutlined />}>
                搜索
              </Button>
              <Button icon={<ReloadOutlined />}>
                重置
              </Button>
              <Button type="primary" icon={<PlusOutlined />} onClick={handleAddRole}>
                新增角色
              </Button>
              <Button type="default">
                导出
              </Button>
            </Space>
          </Col>
        </Row>
      </div>
      <Table
        columns={roleColumns}
        dataSource={roleData}
        pagination={{
          total: roleData.length,
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条记录`,
        }}
        scroll={{ x: 1000 }}
      />
      
      {/* 角色编辑模态框 */}
      <Modal
        title={editingRole ? "编辑角色" : "新增角色"}
        open={roleModalVisible}
        onOk={handleSaveRole}
        onCancel={() => {
          setRoleModalVisible(false);
          setEditingRole(null);
          roleForm.resetFields();
        }}
        width={600}
      >
        <Form form={roleForm} layout="vertical">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="roleName"
                label="角色名称"
                rules={[{ required: true, message: '请输入角色名称' }]}
              >
                <Input placeholder="请输入角色名称" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="roleKey"
                label="权限字符"
                rules={[{ required: true, message: '请输入权限字符' }]}
              >
                <Input placeholder="请输入权限字符" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="sort"
                label="显示顺序"
                rules={[{ required: true, message: '请输入显示顺序' }]}
              >
                <Input type="number" placeholder="请输入显示顺序" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="status" label="状态" valuePropName="checked">
                <Switch checkedChildren="启用" unCheckedChildren="停用" />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item name="remark" label="备注">
            <Input.TextArea rows={3} placeholder="请输入备注" />
          </Form.Item>
        </Form>
      </Modal>

      {/* 权限分配模态框 */}
      <Modal
        title="分配权限"
        open={permissionModalVisible}
        onOk={handleSavePermissions}
        onCancel={() => {
          setPermissionModalVisible(false);
          setEditingRole(null);
        }}
        width={600}
      >
        <div style={{ marginBottom: 16 }}>
          <strong>角色：{editingRole?.roleName}</strong>
        </div>
        <Checkbox.Group
          options={permissionOptions}
          value={editingRole?.permissions || []}
          onChange={(checkedValues) => {
            if (editingRole) {
              setEditingRole({
                ...editingRole,
                permissions: checkedValues as string[]
              });
            }
          }}
        />
      </Modal>
    </Card>
  );

  const renderMenuManagement = () => (
    <Card>
      <div style={{ marginBottom: 16 }}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Input placeholder="请输入菜单名称" allowClear />
          </Col>
          <Col span={6}>
            <Select placeholder="菜单状态" allowClear style={{ width: '100%' }}>
              <Option value={1}>显示</Option>
              <Option value={0}>隐藏</Option>
            </Select>
          </Col>
        </Row>
        <Row style={{ marginTop: 16 }}>
          <Col>
            <Space>
              <Button type="primary" icon={<SearchOutlined />}>
                搜索
              </Button>
              <Button icon={<ReloadOutlined />}>
                重置
              </Button>
              <Button type="primary" icon={<PlusOutlined />} onClick={handleAddMenu}>
                新增菜单
              </Button>
              <Button type="default">
                展开/折叠
              </Button>
            </Space>
          </Col>
        </Row>
      </div>
      <Table
        columns={menuColumns}
        dataSource={menuData}
        pagination={false}
        defaultExpandAllRows
        scroll={{ x: 1000 }}
      />
      
      {/* 菜单编辑模态框 */}
      <Modal
        title={editingMenu ? "编辑菜单" : "新增菜单"}
        open={menuModalVisible}
        onOk={handleSaveMenu}
        onCancel={() => {
          setMenuModalVisible(false);
          setEditingMenu(null);
          menuForm.resetFields();
        }}
        width={800}
      >
        <Form form={menuForm} layout="vertical">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="menuName"
                label="菜单名称"
                rules={[{ required: true, message: '请输入菜单名称' }]}
              >
                <Input placeholder="请输入菜单名称" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="parentId" label="上级菜单">
                <TreeSelect
                  treeData={menuData}
                  fieldNames={{ label: 'menuName', value: 'id', children: 'children' }}
                  placeholder="选择上级菜单"
                  allowClear
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item
                name="menuType"
                label="菜单类型"
                rules={[{ required: true, message: '请选择菜单类型' }]}
              >
                <Select placeholder="请选择菜单类型">
                  <Option value="M">目录</Option>
                  <Option value="C">菜单</Option>
                  <Option value="F">按钮</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="icon" label="菜单图标">
                <Input placeholder="请输入菜单图标" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                name="orderNum"
                label="显示排序"
                rules={[{ required: true, message: '请输入显示排序' }]}
              >
                <Input type="number" placeholder="请输入显示排序" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="path" label="路由地址">
                <Input placeholder="请输入路由地址" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="component" label="组件路径">
                <Input placeholder="请输入组件路径" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="perms" label="权限标识">
                <Input placeholder="请输入权限标识" />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="visible" label="显示状态" valuePropName="checked">
                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="status" label="菜单状态" valuePropName="checked">
                <Switch checkedChildren="正常" unCheckedChildren="停用" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </Card>
  );

  const menuItems = [
    { key: 'users', label: '用户管理', icon: <UserOutlined /> },
    { key: 'roles', label: '角色管理', icon: <SafetyOutlined /> },
    { key: 'menus', label: '菜单管理', icon: <SettingOutlined /> },
    { key: 'logs', label: '操作日志', icon: <BellOutlined /> },
  ];

  return (
    <div style={{ padding: '24px', background: '#f0f2f5', minHeight: '100vh' }}>
      <Card style={{ marginBottom: 16 }}>
        <div style={{ background: '#1890ff', color: 'white', padding: '8px 16px', borderRadius: '4px', marginBottom: '16px' }}>
          <strong>系统管理</strong> - 用户体系、权限管理、系统配置等功能
        </div>
      </Card>

      <Row gutter={16}>
        <Col span={4}>
          <Card>
            <div style={{ marginBottom: 16 }}>
              <strong>功能菜单</strong>
            </div>
            {menuItems.map(item => (
              <div
                key={item.key}
                style={{
                  padding: '8px 12px',
                  cursor: 'pointer',
                  borderRadius: '4px',
                  marginBottom: '4px',
                  background: activeTab === item.key ? '#e6f7ff' : 'transparent',
                  color: activeTab === item.key ? '#1890ff' : '#666',
                  border: activeTab === item.key ? '1px solid #91d5ff' : '1px solid transparent'
                }}
                onClick={() => setActiveTab(item.key)}
              >
                {item.icon} {item.label}
              </div>
            ))}
          </Card>
        </Col>
        <Col span={20}>
          {activeTab === 'users' && renderUserManagement()}
          {activeTab === 'roles' && renderRoleManagement()}
          {activeTab === 'menus' && renderMenuManagement()}
          {activeTab === 'logs' && renderOperationLog()}
        </Col>
      </Row>
    </div>
  );
};

export default SystemSettings;